<template>
	<!-- 页面内容--首页 -->
	<view style="width: 100vw; min-height: 100vh; background-color: #151718; color:#FFFFFF ;">
		<!-- 刷新 -->
	<!-- 	<view class="refresh flexcenter" :style="{ top: `${posY}px`, left: `${posX}px` }" @touchstart="touchStart"
			@touchmove="touchMove" @touchend="touchEnd" @click="refreshPage">
			<image src="../../static/refresh.png" mode=""></image>
		</view> -->
		<navigatorVue headname="NeoLoan" :showheadlogo="true" :showbackicon="false"></navigatorVue>
		<!-- 主产品-------------------------------------------------------- 开始 -->
		<view class="two" :style="{
			paddingTop: navigateHeight ? (navigateHeight + 30) + 'rpx' : '30rpx'
		}">
			<view class="P-1" :style="{
			paddingTop: navigateHeight ? (navigateHeight + 110) + 'rpx' : '110rpx'
		}">

				<view class="P-1-head">
					<view class="flexrowspacebetween">
						<view class="l-1 flexrowstart">
							<view style="width: fit-content;
							height: fit-content;position: relative;
							">
								<image :src="indexData[0].pxly" mode=""></image>
								<image style="position: absolute;
								right: -20rpx;
								top: -26rpx;
								width: 60rpx;
								height: 60rpx;" src="../../static/tag.png" mode=""></image>
							</view>

							<p style="margin-left: 20rpx;">{{indexData[0].fhyb}}</p>
						</view>
						<p class="topone flexcenter">TOP 1</p>
					</view>

					<p v-if="indexData[0].viewStatus=='1' || indexData[0].viewStatus=='2'"
						class="flexcenter l-2 gradient-text"><span style="font-size: 50rpx;
					margin-right: 20rpx;
					">฿</span>{{formatAmount(indexData[0].xfjf)}}</p>
					<p v-else class="flexcenter l-2 gradient-text"><span style="font-size: 50rpx;
					margin-right: 20rpx;
					">฿</span> 5,000</p>
					<!-- 		<p class="flexcenter l-2 gradient-text"><span style="font-size: 50rpx;
					margin-right: 20rpx;
					">฿</span> 5,000</p> -->
					<view class="l-3">
						<image src="../../static/progressing.png" mode=""></image>
					</view>
					<view class="l-4 flexrowspacebetween">
						<p>฿ 1,000</p>
						<p>฿ 50,000</p>
					</view>
					<view v-if="indexData[0].viewStatus=='0' && (indexData[0].hasLoan ==0)"
						class="l-5 flexrowspacebetween">
						<p>{{$t('index.time')}} 3 {{$t('index.minute')}}</p>
						<p>{{$t('index.loandata')}} <span class="brightword">91-365</span>{{$t('index.day')}}</p>
					</view>
					<view v-if="indexData[0].viewStatus=='0' && (indexData[0].hasLoan ==1)"
						class="l-5 flexrowspacebetween" style="background-color: transparent;color: #fff;padding: 0;">
						<view class="flexrowspacebetween" style="width: 100%;">
							<view>
								<p>{{$t('index.loanagainone')}}</p>
								<p>{{$t('index.loanagaintwo')}}</p>
								<p>{{$t('index.loanagainthree')}}</p>
								<p>{{$t('index.loanagainfour')}}</p>
							</view>
							<image style="width: 150rpx;height: 120rpx;margin-left: 20rpx;"
								src="../../static/loanagain.png" mode=""></image>
						</view>
					</view>
					<view v-if="indexData[0].viewStatus=='3'" class="l-5 flexrowspacebetween" style="padding: 30rpx;">
						{{$t('index.undercheck')}}
					</view>
					<view v-if="indexData[0].viewStatus=='1'" class="l-5 flexcentercloumn" style="padding: 30rpx;">
						<view style="width: 100%;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 40rpx; margin-right: 20rpx;"
									src="../../static/bankicon.png" mode=""></image>
								<p>{{$t('money.Repaymentamount')}}</p>
							</view>
							<p>฿ {{formatAmount(indexData[0].xfjf)}}</p>
						</view>
						<view style="width: 100%;margin-top: 30rpx;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 46rpx; margin-right: 20rpx;"
									src="../../static/paydayicon.png" mode=""></image>
								<p>{{$t('money.Paymentdate')}}</p>
							</view>
							<p>฿ {{indexData[0].dfkw}}</p>
						</view>
					</view>
					<view v-if="indexData[0].viewStatus=='2'" class="l-5 flexcentercloumn" style="padding: 30rpx;">
						<p style="color: #FFF584;font-size: 14px;">{{$t('index.late')}}
							<span
								style="color: red;margin-left: 20rpx;font-size: 16px;">{{indexData[0].rlqb}}</span>{{$t('index.day')}}
						</p>
						<view style="width: 100%;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 40rpx; margin-right: 20rpx;"
									src="../../static/bankicon.png" mode=""></image>
								<p>{{$t('money.Repaymentamount')}}</p>
							</view>
							<p>฿ {{formatAmount(indexData[0].xfjf)}}</p>
						</view>
						<view style="width: 100%;margin-top: 30rpx;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 46rpx; margin-right: 20rpx;"
									src="../../static/paydayicon.png" mode=""></image>
								<p>{{$t('money.Paymentdate')}}</p>
							</view>
							<p>฿ {{indexData[0].dfkw}}</p>
						</view>
					</view>
					<view v-if="indexData[0].viewStatus=='4'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx; color:#DE8484 ;">
						{{$t('index.refuse')}}
					</view>
					<view v-if="indexData[0].viewStatus=='5'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx; color:#DE8484 ;">
						{{$t('index.updatebank')}}

					</view>
					<view v-if="indexData[0].viewStatus=='4'" class="P-2 flexcenter">
						<view style="width: 100%;box-sizing: border-box;" class="flexrowspacearound">
							<view style="width: fit-content;background-color: #D39AF0;
							border-radius: 10rpx;
							padding: 16rpx 26rpx;
							" class="flexcenter">
								<u-icon name="clock" color="#000" size="20"></u-icon>
								<span style="margin-left: 20rpx;">7 {{$t('index.day')}}</span>
							</view>
							<view class="flexcenter" style="width: fit-content;background-color: #FFF584;color: #151718;
							border-radius: 10rpx;
							padding: 16rpx 26rpx;
							">{{$t('index.loginnow')}}</view>
						</view>
					</view>
					<view v-if="indexData[0].viewStatus=='7' &&  indexData[0].drdv!='2'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx;">
						{{$t('index.beforereceive')}}
					</view>
					<view v-if="indexData[0].viewStatus=='7' &&  indexData[0].drdv =='2'"
						class="l-5 flexrowspacebetween" style="padding: 30rpx;">
						{{$t('index.afterreceive')}}
					</view>
					<view v-if="indexData[0].viewStatus=='6'" class="l-5 flexrowspacebetween" style="padding: 30rpx;">
						{{$t('index.afterreceive')}}
					</view>
				</view>

			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='0' && indexData[0].hasLoan==1" @click="fn1(indexData[0])"
			class="P-2 flexcenter">
			<p v-if="currentlang=='es'" style="font-size: 26rpx;">{{$t('index.loanagain')}}</p>
			<p v-else>{{$t('index.loanagain')}}</p>
		</view>
		<view v-if="indexData[0].viewStatus=='0' && indexData[0].hasLoan==0" @click="fn1(indexData[0])"
			class="P-2 flexcenter">
			<p class="reminderClick">{{$t('index.loginnow')}}</p>
		</view>
		<view v-if="indexData[0].viewStatus=='3'" @click="fn1(indexData[0])" class="P-2 flexcenter">
			<view style="background-color: #D8D8D8;" class="btn">
				{{$t('index.undercheckbtn')}}
			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='5'" @click="fn1(indexData[0])" class="P-2 flexcenter">
			<view class="btn">
				{{$t('index.updatebankbtn')}}
			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='4'" @click="fn1(indexData[0])" class="P-2 flexcenter">
			<view class="btn" style="background-color:#d0626a; color: #fff;">
				{{$t('index.refusepagetitle')}}
			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='1'" @click="fn1(indexData[0])" class="P-2 flexcenter">
			<view class="btn">
				{{$t('index.repaying')}}
			</view>
		</view>
		<p @click="openExtendPage(indexData[0])" class="flexcenter extendday"
			v-if="indexData[0].viewStatus=='1' || indexData[0].viewStatus=='2'">
			{{$t('index.extendday')}}
			{{indexData[0].ione}}
			{{$t('index.day')}}
			>
		</p>
		<view v-if="indexData[0].viewStatus=='2'" @click="fn1(indexData[0])" class="P-2 flexcenter">
			<view class="btn">
				{{$t('index.repaying')}}
			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='7' &&  indexData[0].drdv !='2'" @click="fn1(indexData[0])"
			class="P-2 flexcenter">
			<view class="btn">
				{{$t('index.goreceive')}}
			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='7' &&  indexData[0].drdv =='2'" @click="fn1(indexData[0])"
			class="P-2 flexcenter">
			<view style="background-color: #D8D8D8;" class="btn">
				{{$t('wait')}}
			</view>
		</view>
		<view v-if="indexData[0].viewStatus=='6'" @click="fn1(indexData[0])" class="P-2 flexcenter">
			<view style="background-color: #D8D8D8;" class="btn">
				{{$t('wait')}}
			</view>
		</view>
		<!-- 主产品--------------------------------------------------------结束 -->
		<!-- 		<view class="P-3 flexcenter">
			<view class="box">
				<image src="../../static/newtag.png" mode=""></image>
			</view>
		</view> -->
		<!-- 子产品 -->
		<view class="P-scrool">
			<view v-for="(item,index) in childlist" :key="index" class="itembox">
				<image v-if="item.nbiq" class="lockedimg" :src="item.nbiq" mode=""></image>
				<view v-if="item.nbiq" class="lockedword flexcenter">
					<p>
						{{$t('index.lockedtips')}}
					</p>
				</view>
				<view class="P-scrollitem">
					<!-- 解锁状态下样式 -->
					<view class="flexcenter">
						<image :src="item.pxly" mode=""></image>
						<p>{{item.fhyb}}</p>
					</view>
					<view v-if="item.viewStatus=='1' || item.viewStatus=='2'" class="moneyrange flexcenter">
						฿ {{formatAmount(item.xfjf)}}
					</view>
					<view v-else class="moneyrange flexcenter">
						฿ {{formatAmount(item.mvto)}} ~ ฿ {{formatAmount(item.aemm)}}
					</view>
					<!-- 子产品各种信息 -->
					<view v-if="item.viewStatus=='0' && item.hasLoan==0 " class="l-5 flexrowspacebetween">
						<p>{{$t('index.time')}} 3 {{$t('index.minute')}}</p>
						<p>{{$t('index.loandata')}} <span class="brightword">91-365</span>{{$t('index.day')}}</p>
					</view>
					<view v-if="item.viewStatus=='0'&& !item.nbiq  && item.hasLoan==1 " class="l-5 flexrowspacebetween"
						style="background-color: transparent;color: #fff;padding: 0;">
						<view class="flexrowspacebetween" style="width: 100%;">
							<view>
								<p>{{$t('index.loanagainone')}}</p>
								<p>{{$t('index.loanagaintwo')}}</p>
								<p>{{$t('index.loanagainthree')}}</p>
								<p>{{$t('index.loanagainfour')}}</p>
							</view>
							<image style="width: 150rpx;height: 120rpx;margin-left: 20rpx;"
								src="../../static/loanagain.png" mode=""></image>
						</view>
					</view>

					<view v-if="item.viewStatus=='3'" class="l-5 flexrowspacebetween" style="padding: 30rpx;">
						{{$t('index.undercheck')}}
					</view>
					<view v-if="item.viewStatus=='1'" class="l-5 nobg flexcentercloumn" style="padding: 30rpx;">
						<view style="width: 100%;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 40rpx; margin-right: 20rpx;"
									src="../../static/bankicon.png" mode=""></image>
								<p>{{$t('money.Repaymentamount')}}</p>
							</view>
							<p>฿ {{formatAmount(item.xfjf)}}</p>
						</view>
						<view style="width: 100%;margin-top: 30rpx;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 46rpx; margin-right: 20rpx;"
									src="../../static/paydayicon.png" mode=""></image>
								<p>{{$t('money.Paymentdate')}}</p>
							</view>
							<p>฿ {{item.dfkw}}</p>
						</view>
					</view>
					<view v-if="item.viewStatus=='2'" class="l-5 nobg flexcentercloumn" style="padding: 30rpx;">
						<p style="color: #FFF584;font-size: 14px;">{{$t('index.late')}}
							<span
								style="color: red;margin-left: 20rpx;font-size: 16px;">{{item.rlqb}}</span>{{$t('index.day')}}
						</p>
						<view style="width: 100%;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 40rpx; margin-right: 20rpx;"
									src="../../static/bankicon.png" mode=""></image>
								<p>{{$t('money.Repaymentamount')}}</p>
							</view>
							<p>฿ {{formatAmount(item.xfjf)}}</p>
						</view>
						<view style="width: 100%;margin-top: 30rpx;" class="flexrowspacebetween">
							<view class="flexrowstart">
								<image style="width: 50rpx;height: 46rpx; margin-right: 20rpx;"
									src="../../static/paydayicon.png" mode=""></image>
								<p>{{$t('money.Paymentdate')}}</p>
							</view>
							<p>฿ {{item.dfkw}}</p>
						</view>
					</view>
					<view v-if="item.viewStatus=='4'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx; color:#DE8484 ;">
						{{$t('index.refuse')}}
					</view>
					<view v-if="item.viewStatus=='5'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx; color:#DE8484 ;">
						{{$t('index.updatebank')}}

					</view>
					<view v-if="item.viewStatus=='7' &&  item.drdv!='2'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx;">
						{{$t('index.beforereceive')}}
					</view>
					<view v-if="item.viewStatus=='7' &&  item.drdv =='2'" class="l-5 flexrowspacebetween"
						style="padding: 30rpx;">
						{{$t('index.afterreceive')}}
					</view>
					<view v-if="item.viewStatus=='6'" class="l-5 flexrowspacebetween" style="padding: 30rpx;">
						{{$t('index.afterreceive')}}
					</view>

					<!-- 子产品各种按钮 -->
					<view v-if="!item.nbiq">
						<view v-if="item.viewStatus=='0' && item.hasLoan==1" @click="fn1(item)" class="P-2 flexcenter">

							<p v-if="currentlang=='es'" style="font-size: 26rpx;">{{$t('index.loanagain')}}</p>
							<p v-else>{{$t('index.loanagain')}}</p>
						</view>
						<view v-if="item.viewStatus=='0' && item.hasLoan==0" @click="fn1(item)" class="P-2 flexcenter">
							<p class="reminderClick">{{$t('index.loginnow')}}</p>
						</view>
						<view v-if="item.viewStatus=='3'" @click="fn1(item)" class="P-2 flexcenter">
							<view style="background-color: #D8D8D8;" class="btn">
								{{$t('index.undercheckbtn')}}
							</view>
						</view>
						<view v-if="item.viewStatus=='4'" class="P-2 flexcenter">
							<view style="width: 100%;box-sizing: border-box;" class="flexrowspacearound">
								<view style="width: fit-content;background-color: #D39AF0;
									border-radius: 10rpx;
									padding: 16rpx 26rpx;
									" class="flexcenter">
									<u-icon name="clock" color="#000" size="20"></u-icon>
									<span style="margin-left: 20rpx;">7 {{$t('index.day')}}</span>
								</view>
								<view class="flexcenter" style="width:fit-content;background-color: #FFF584;color: #151718;
									border-radius: 10rpx;
									padding: 16rpx 26rpx;
									">{{$t('index.loginnow')}}</view>
							</view>
						</view>
						<view v-if="item.viewStatus=='4'" @click="fn1(item)" class="P-2 flexcenter">
							<view class="btn" style="background-color:#d0626a; color: #fff;">
								{{$t('index.refusepagetitle')}}
							</view>
						</view>
						<view v-if="item.viewStatus=='5'" @click="fn1(item)" class="P-2 flexcenter">
							<view class="btn">
								{{$t('index.updatebankbtn')}}
							</view>
						</view>
						<view v-if="item.viewStatus=='1'" @click="fn1(item)" class="P-2 flexcenter">
							<view class="btn">
								{{$t('index.repaying')}}
							</view>
						</view>
						<p style="margin-top: 0;" @click="openExtendPage(item)" class="flexcenter extendday"
							v-if="item.viewStatus=='1' || item.viewStatus=='2' ">
							{{$t('index.extendday')}}
							{{item.ione}}
							{{$t('index.day')}}
							>
						</p>
						<view v-if="item.viewStatus=='2'" @click="fn1(item)" class="P-2 flexcenter">
							<view class="btn">
								{{$t('index.repaying')}}
							</view>
						</view>
						<view v-if="item.viewStatus=='7' &&  item.drdv !='2'" @click="fn1(item)" class="P-2 flexcenter">
							<view class="btn">
								{{$t('index.goreceive')}}
							</view>
						</view>
						<view v-if="item.viewStatus=='7' &&  item.drdv =='2'" @click="fn1(item)" class="P-2 flexcenter">
							<view style="background-color: #D8D8D8;" class="btn">
								{{$t('wait')}}
							</view>
						</view>
						<view @click="fn1(item)" v-if="item.viewStatus=='6'" class="P-2 flexcenter">
							<view style="background-color: #D8D8D8;" class="btn">
								{{$t('wait')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 子产品--------------------------------------------------------结束 -->
		<view class="P-4 flexcenter">
			<view class="tips flexcenter">
				<p>{{$t('index.tips')}}</p>
			</view>
		</view>
		<view class="P-5">
			<view class="content-1 flexrowspacebetween">
				<image src="../../static/locked.png" mode=""></image>
				<p>
					{{$t('index.pctips')}}
				</p>
			</view>
			<view class="content-2 flexrowspacebetween">
				<image @click='clickpc' v-if="agreepc" src="../../static/choosed.png" mode=""></image>
				<image @click='clickpc' v-else src="../../static/choose.png" mode=""></image>
				<p>
					{{$t('index.pctitle')}}
					<uni-link class="linkstyle" color="#9F84DB" fontSize='12'
						href="https://www.neoloanth.com/PrivacyAgreement.html"
						:text="$t('index.pcagreement')"></uni-link>
					<uni-link class="linkstyle" color="#9F84DB" fontSize='12'
						href="https://www.neoloanth.com/UserAgreement.html"
						:text="$t('index.useragreement')"></uni-link>
				</p>
			</view>
		</view>
		<!-- 		<uni-popup ref="langpopup" type="center" :animation="false" :is-mask-click="false">
			<view class="langpopup">
				<p class="header">{{$t('index.Selectlanguage')}}</p>
				<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">

					<view class="text" style="padding: 30rpx;">{{item.text}} {{applicationLocale}} {{item.code}}
					</view>
					<image v-if="item.code == 'es'" style="width: 100rpx; height: 60rpx;"
						src="../../static/lang/moxige.png" mode=""></image>
					<image v-if="item.code == 'th'" style="width: 100rpx; height: 60rpx;"
						src="../../static/lang/taiguo.png"></image>
					<image v-if="item.code == applicationLocale" style="width: 60rpx; height: 60rpx;"
						src="../../static/lang/bigchoose.png" mode="">
					</image>
					<image v-else style="width: 60rpx; height: 60rpx;" src="../../static/lang/bigchoosed.png" mode="">
					</image>
				</view>
			</view>
		</uni-popup> -->
		<!-- 国际化 -->
	</view>
</template>


<script>
	import {
		requestAndroidPermission
	} from '../../js_sdk/wa-permission/permission.js';
	import navigatorVue from '../../components/navigator.vue';
	import api from '@/pages/utils/api.js';
	import setDot from '@/pages/utils/setdot.js';
	export default {
		data() {
			return {
				hours: '00',
				minutes: '00',
				seconds: '00',
				timer: null,
				navigateHeight: '',
				systemLocale: '',
				applicationLocale: '',


				posX: 0, // 拖动按钮的位置
				posY: 0,
				startX: 0,
				startY: 0,


				agreepc: true,
				isAndroid: true,

				indexData: [{}],
				childlist: [{}],
				currentlang: 'th'

			};
		},
		components: {
			navigatorVue
		},
		computed: {
			locales() {
				return [
					// {
					// 	text: this.$t('locale.auto'),
					// 	code: 'auto'
					// }, 
					{
						text: this.$t('locale.es'),
						code: 'es'
					},
					{
						text: this.$t('locale.th'),
						code: 'th'
					},
				]
			}
		},
		onPullDownRefresh() {
			console.log('执行了下拉刷新');
			this.getIndexData()
		},
		onTabItemTap(res) {
			console.log('首页导航栏', res);
		},
		onShow() {
			this.currentlang = uni.getLocale()
			console.log('进来啦首页onshow~~~~~~~~~');
			this.getIndexData()
		},
		onLoad() {
			// 初始化在右中位置
			const sys = uni.getSystemInfoSync()
			this.posX = sys.windowWidth - uni.upx2px(110) // 90rpx + 20rpx padding
			this.posY = sys.windowHeight / 2 - uni.upx2px(45) // 90rpx / 2
			// -------------------------------------------------------------------
		},
		created() {
			this.navigateHeight = uni.getStorageSync('navigateHeight') || ""
		},
		mounted() {
			// this.startTimer(3600);


		},
		methods: {
			getPermissions() {
				console.log('点击了');
				// #ifdef APP-PLUS
				requestAndroidPermission('android.permission.CAMERA')
				requestAndroidPermission('android.permission.READ_SMS')
				// #endif
			},
			formatAmount(amount) {
				const number = parseFloat(amount);
				if (isNaN(number)) return '0';
				const isInteger = Number.isInteger(number);

				// 格式化为字符串，并添加千位分隔符
				const parts = number
					.toFixed(isInteger ? 0 : 2)
					.split('.');

				parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');

				return parts.join('.');
			},
			getIndexData() {
				// uni.setStorageSync('appSsid', '120')
				// uni.setStorageSync('currntOrderId', uni.getStorageSync('userId'))
				uni.removeStorageSync('kjxy')
				uni.removeStorageSync('appSsid')
				api.getIndexInfo().then((data) => {
					this.indexData = data
					uni.stopPullDownRefresh(); // 停止下拉刷新动画
					console.log('首页res', this.indexData);
					this.childlist = this.indexData.slice(1)
					console.log('子产品res', this.childlist);
					//领款功能
					if (this.indexData[0].viewStatus == '7' && this.indexData[0].drdv != '2') {
						uni.setStorageSync('currntOrderId', this.indexData[0].jcno);
						//2代表已领取
						//只有第一次往里面跳转
						if (!uni.getStorageSync('hasjumpedSeeven')) {
							uni.navigateTo({
								url: '/pages/demo2/seven', //领取页面
								animationType: 'slide-in-right',
								animationDuration: 200
							})
						}
					}
				});
			},
			// 刷新按钮可拖动
			// -------------------------------------------------------------------------
			refreshPage() {
				console.log('刷新页面');
				this.getIndexData()
			},
			touchStart(e) {
				this.startX = e.touches[0].clientX - this.posX
				this.startY = e.touches[0].clientY - this.posY
			},
			touchMove(e) {
				this.posX = e.touches[0].clientX - this.startX
				this.posY = e.touches[0].clientY - this.startY
			},
			touchEnd() {
				const systemInfo = uni.getSystemInfoSync()
				const screenWidth = systemInfo.windowWidth
				const screenHeight = systemInfo.windowHeight
				const btnWidth = uni.upx2px(90)
				const btnHeight = uni.upx2px(90)

				// 左右边界
				if (this.posX < 0) this.posX = 0
				if (this.posX > screenWidth - btnWidth) this.posX = screenWidth - btnWidth

				// 上下边界
				if (this.posY < 0) this.posY = 0
				if (this.posY > screenHeight - btnHeight) this.posY = screenHeight - btnHeight
			},
			// -------------------------------------------------------------------------			
			clickpc() {
				this.agreepc = !this.agreepc
			},
			onLocaleChange(item) {

				const langCode = item.code;
				console.log('用户选择语言:', langCode);

				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						confirmText: this.$t('index.confirm'),
						cancelText: this.$t('index.cancel'),
						success: (res) => {
							console.log('语言切换res', res);
							if (res.confirm) {
								this.setAppLocale(langCode);
								this.applicationLocale = langCode;

								this.$refs.langpopup.close()

							}
						}
					})
				} else {
					this.setAppLocale(langCode);
				}
			},
			setAppLocale(langCode) {
				uni.setLocale(langCode);
				this.$i18n.locale = langCode;
				this.applicationLocale = langCode;

			},
			startTimer(duration) {
				let timer = duration;
				this.timer = setInterval(() => {
					this.hours = this.pad(Math.floor(timer / 3600));
					this.minutes = this.pad(Math.floor((timer % 3600) / 60));
					this.seconds = this.pad(timer % 60);

					if (--timer < 0) {
						clearInterval(this.timer);
						this.hours = '00';
						this.minutes = '00';
						this.seconds = '00';
					}
				}, 1000);
			},
			pad(num) {
				return num < 10 ? '0' + num : num;
			},
			openExtendPage(item) {
				console.log('要战旗的产品', item);
				uni.setStorageSync('appSsid', item.appSsid)
				uni.setStorageSync('currntOrderId', item.jcno)
				api.copyuserid({
					dzjq: '120'
				}).then((data) => {
					console.log('直接展期 先复制的用户信息', data);
					uni.setStorage({
						key: 'kjxy',
						data: data.newUserId,
						success: function() {
							let obj = item
							obj.clickextrendbtn = true
							console.log('再跳转', obj);
							const objStr = encodeURIComponent(JSON.stringify(obj));
							uni.navigateTo({
								url: `/pages/demo2/one?currentclick=${objStr}`,
								animationType: 'slide-in-right',
								animationDuration: 200
							});
						}
					});
				})
			},
			fn1(currentappinfo) {
				console.log('当前点击的产品', currentappinfo);
				uni.setStorageSync('appSsid', currentappinfo.appSsid);
				uni.setStorageSync('currntOrderId', currentappinfo.jcno);
				const goToViewStatus = () => {
					// 最大前置条件 登录、且同意隐私协议
					if (uni.getStorageSync('userId')) {
						if (!this.agreepc) {
							uni.showToast({
								icon: 'none',
								title: this.$t('index.notagreetips')
							});
							return;
						}

						// 进入主流程判断
						switch (currentappinfo.viewStatus) {
							case "0": // 未申请
								if (currentappinfo.appSsid === '120') {
									if (currentappinfo.hasLoan === 0) {
										setDot('CLICK_FIRST_INDEX_APPLY_SUBMIT');
										uni.setStorageSync('hasloanstatus', false);
										uni.navigateTo({
											url: '/pages/demo9/demo9',
											// url: '/pages/demo5/demo5',
											animationType: 'slide-in-right',
											animationDuration: 200
										});
									} else {
										setDot('CLICK_INDEX_APPLY_SUBMIT');
										// this.getPermissions()
										uni.setStorageSync('hasloanstatus', true);
										uni.reLaunch({
											url: `/pages/demo5/demo5?refinancing=${true}`
										});
									}
								} else {
									if (currentappinfo.hasLoan === 0) {
										setDot('CLICK_FIRST_INDEX_APPLY_SUBMIT');
										uni.setStorageSync('hasloanstatus', false);
									} else {
										uni.setStorageSync('hasloanstatus', true);
									}
									// this.getPermissions()
									setDot('CLICK_INDEX_APPLY_SUBMIT');
									uni.reLaunch({
										url: `/pages/demo5/demo5?refinancing=${true}`
									});
								}
								break;

							case "3": // 待审核
								uni.navigateTo({
									url: '/pages/demo2/three',
									animationType: 'slide-in-right',
									animationDuration: 200
								});
								break;

							case "4": // 拒绝
								uni.navigateTo({
									url: '/pages/demo2/four',
									animationType: 'slide-in-right',
									animationDuration: 200
								});
								break;

							case "7": // 领取
								if (currentappinfo.drdv !== '2') {
									uni.navigateTo({
										url: '/pages/demo2/seven',
										animationType: 'slide-in-right',
										animationDuration: 200
									});
								} else {
									uni.showToast({
										icon: 'none',
										title: this.$t('index.afterreceive')
									});
								}
								break;

							case "5": // 失败
								uni.navigateTo({
									url: '/pages/demo2/five',
									animationType: 'slide-in-right',
									animationDuration: 200
								});
								break;
							case "6":
								uni.showToast({
									icon: 'none',
									title: this.$t('index.afterreceive')
								});
								break;

							case "1": // 正常还款
							case "2": // 逾期还款
								const currentappinfoStr = encodeURIComponent(JSON.stringify(currentappinfo));
								uni.navigateTo({
									url: `/pages/demo2/one?currentclick=${currentappinfoStr}`,
									animationType: 'slide-in-right',
									animationDuration: 200
								});
								break;

							default:
								break;
						}
					} else {
						uni.navigateTo({
							url: '/pages/demo1/demo1',
							animationType: 'slide-in-right',
							animationDuration: 200
						});
					}
				};

				// 如果是主产品，直接进入流程判断
				if (currentappinfo.appSsid === '120' || currentappinfo.viewStatus == '6') {
					goToViewStatus();
				} else {
					// 非主产品，先复制 再执行逻辑
					api.copyuserid({
						dzjq: '120'
					}).then((data) => {
						console.log('复制的用户信息', data);
						uni.setStorageSync('kjxy', data.newUserId);
						goToViewStatus(); // 保证 newUserId 拿到后才进入判断流程
					})
				}
			}

		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	};
</script>

<style lang="scss" scoped>
	.extendday {
		margin: 20rpx;
		color: #FFF584;
		font-size: 16px;
		text-decoration: underline;
	}

	.flexcentercloumn {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	.refresh {
		background: linear-gradient(135deg, #e0bbf3, #d5a6f3);
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		right: 20rpx;
		top: 50vh;
		border-radius: 50%;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		animation: pulse 2s infinite;
	}

	.refresh image {
		width: 60%;
		height: 60%;
		filter: drop-shadow(0 0 4rpx rgba(255, 255, 255, 0.6));
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.langpopup {
		width: 80vw;
		height: fit-content;
		padding: 40rpx;
		border-radius: 30rpx;
		position: relative;
		color: #fff;
		background-image: url('../../static/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.header {
			width: 100%;
			text-align: center;
		}

		.locale-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				width: 220rpx;
			}
		}
	}


	.one {
		margin-right: 10px;
	}

	.two {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.two image {
		width: 70px;
		height: 70px;
	}

	.P-5 {
		margin: 0rpx 30rpx;
		background-color: #393A3D;
		padding: 20rpx 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;

		.content-2 {
			box-sizing: border-box;
			color: #9C9C9C;

			.linkstyle {
				margin-left: 20rpx;
				color: #9F84DB !important;
			}

			image {
				width: 43rpx;
				height: 43rpx;
			}

			p {
				width: 90%;
			}
		}

		.content-1 {
			box-sizing: border-box;
			color: #B1FBDF;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 4rpx solid #474747;


			image {
				width: 43rpx;
				height: 50rpx;
			}

			p {
				width: 90%;
			}

		}
	}

	.P-scrool {
		margin: 20rpx 30rpx;
		// height: 40vh;
		// overflow-y: scroll;
		box-sizing: border-box;

		.itembox {
			position: relative;

			.lockedword {
				//这里开始写
				width: 100%;
				position: absolute;
				bottom: 0;
				right: 0;
				bottom: 9%;
				z-index: 99;
				font-size: 11px;
				box-sizing: border-box;
				height: 50px;

				p {
					width: 77%;
					margin-left: 100rpx;
				}
			}

			.lockedimg {
				width: 100%;
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 99;
				height: 100%;
				border-radius: 30rpx 30rpx 30rpx 0rpx;
				// opacity: 0.9;
			}
		}

		.P-scrollitem {
			background-image: url('../../static/bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: fit-content;
			margin-bottom: 20rpx;
			padding: 40rpx 30rpx;
			box-sizing: border-box;

			image {
				width: 80rpx;
				height: 80rpx;
				// border-radius: 50%;
				margin-right: 20rpx;
			}

			.moneyrange {
				font-size: 50rpx;
			}



			.l-5 {
				width: 100%;
				background-color: #2F2B32;
				border-radius: 10rpx;
				font-size: 26rpx;
				margin-top: 20rpx;
				height: fit-content;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				background-color: #393A3D;
				color: #6F6F6F;

				.brightword {
					color: #9680AB;
					margin: 0rpx 6rpx;
					font-size: 28rpx;
				}

			}

			.nobg {
				background-color: transparent;
				color: #fff;
			}
		}
	}

	.P-4 {
		margin: 20rpx 30rpx;
		margin-bottom: 24rpx;

		.tips {
			width: 100%;
			background-image: url('/static/tipsimg.png');
			height: 200rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 0rpx 80rpx;
			font-size: 28rpx;
			box-sizing: border-box;

		}
	}

	.P-3 {
		width: 100%;
		height: 60rpx;

		.box {
			position: relative;
			width: 90%;
			background-color: #333333;
			height: 50rpx;
			border-radius: 10rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: -20rpx;
				top: -6rpx;

			}
		}
	}

	.P-2 {
		width: 100%;
		margin: 20rpx 0rpx;


		.btn,
		p {
			width: 86%;
			height: 90rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
		}

		.btn:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.reminderClick {
			animation: pulsebtn 1.2s ease-in-out infinite;
		}

		@keyframes pulsebtn {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.08);
			}

			100% {
				transform: scale(1);
			}
		}

	}

	.P-1 {
		width: 100%;
		padding-top: 110rpx;

		.P-1-head {
			margin: 0rpx 30rpx;
			height: fit-content;
			background-image: url('/static/bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 30rpx;

			.topone {
				background-color: #FF903A;
				border-radius: 6rpx;
				box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
				/* 添加阴影 */
				font-size: 10px;
				padding: 4rpx 20rpx;
			}


			.l-1 {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.l-2 {
				font-size: 60rpx;
				font-weight: bold;
			}

			.gradient-text {
				font-size: 70rpx;
				font-weight: bold;
				background-image: linear-gradient(to bottom, #CD99F3 0%, #CD99F3 40%, #FBE4B9 100%);
				-webkit-background-clip: text;
				color: transparent;
			}

			.l-3 {
				image {
					width: 100%;
					height: 50rpx;
					margin: 20rpx 0rpx 0rpx 0rpx;
				}
			}

			.l-5 {
				width: 100%;
				background-color: #2F2B32;
				border-radius: 20rpx;
				font-size: 26rpx;
				margin-top: 20rpx;
				height: fit-content;
				padding: 0rpx 20rpx;
				box-sizing: border-box;

				.brightword {
					color: #9680AB;
					margin: 0rpx 6rpx;
					font-size: 28rpx;
				}

			}
		}
	}

	.flexrowspacearound {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
</style>